Gulp前端构建前端开发环境

一、下载并安装Node.js

C:UsersAdministrator>node -v
v11.0.0

二、安装npm，安装淘宝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
C:UsersAdministrator>cnpm -v
cnpm@6.0.0 (C:UsersAdministratorAppDataRoaming
pm
ode_modulescnpmlibparse_argv.js)
npm@6.5.0 (C:UsersAdministratorAppDataRoaming
pm
ode_modulescnpm
ode_modules
pmlib
pm.js)
node@11.0.0 (C:Program Files
odejs
ode.exe)
npminstall@3.17.0 (C:UsersAdministratorAppDataRoaming
pm
ode_modulescnpm
ode_modules
pminstalllibindex.js)
prefix=C:UsersAdministratorAppDataRoaming
pm
win32 x64 10.0.17763
registry=https://registry.npm.taobao.org

三、全局安装gulp

C:UsersAdministrator>cnpm install --global gulp

四、局部安装gulp

切换到项目的根目录，局部安装是安装到你项目的根目录

npm install gulp --save-dev
F:DevSpaceGulp>npm install gulp --save-dev
npm WARN saveError ENOENT: no such file or directory, open 'F:DevSpaceGulppackage.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'F:DevSpaceGulppackage.json'
npm WARN Gulp No description
npm WARN Gulp No repository field.
npm WARN Gulp No README data
npm WARN Gulp No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ gulp@4.0.0
added 318 packages from 217 contributors and audited 6376 packages in 26.887s
found 0 vulnerabilities

五、项目初始化，生成package.json

F:DevSpaceGulp>npm init -y
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (gulp)
version: (1.0.0)
description:
entry point: (gulpfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to F:DevSpaceGulppackage.json:

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp": "^4.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

F:DevSpaceGulp>

六、初始化gulpfile.js 的文件

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

 执行gulp命令
F:DevSpaceGulp>gulp
[16:54:12] Using gulpfile F:DevSpaceGulpgulpfile.js
[16:54:12] Starting 'default'...
hello gulp

七、安装项目组件

cnpm install -D gulp gulp-minify-css gulp-cssmin gulp-minify-html gulp-uglify --save-dev 
cnpm install -D gulp-jshint  --save-dev 
cnpm install -D gulp-rename gulp-concat gulp-clean gulp-notify --save-dev 
cnpm install -D browser-sync gulp-sass gulp-clean-css gulp-watch --save-dev
cnpm install -D gulp-connect gulp-less imagemin-pngquantgulp-imagemin --save-dev

压缩JS，CSS文件需要引用如下组件：

  • gulp-minify-css: 压缩css
  • gulp-jshint: 检查js
  • gulp-uglify: 压缩js
  • gulp-concat: 合并文件
  • gulp-rename: 重命名文件
  • gulp-clean: 清空文件夹
  • gulp-notify:提示
  • browser-sync：
  • gulp-sass：sass编译

八、创建任务，并执行

在开发目录执行gulp命令，启动编译任务。

九、删除

1、安装：npm install -g rimraf（全局安装），
如果安装了cnpm，也可使用cnpm install -g rimraf 命令

2、使用：先定位目标文件夹的父级目录，
然后命令行输入rimraf （为需要删除的文件夹名称）

附件一：gulpfile.js示例1

// 引入 gulp及组件
var gulp=require('gulp'),  //gulp基础库
    minifycss=require('gulp-minify-css'),   //css压缩
    concat=require('gulp-concat'),   //合并文件
    uglify=require('gulp-uglify'),   //js压缩
    rename=require('gulp-rename'),   //文件重命名
    jshint=require('gulp-jshint'),   //js检查
    notify=require('gulp-notify');   //提示

gulp.task('default',function(){
    gulp.start('minifycss','minifyjs');
});
 
//css处理
gulp.task('minifycss',function(){
   return gulp.src('htdocs/kunpeng/static/css/*.css')      //设置css
       .pipe(concat('order_query.css'))      //合并css文件到"order_query"
       .pipe(gulp.dest('dist/styles'))           //设置输出路径
       .pipe(rename({suffix:'.min'}))         //修改文件名
       .pipe(minifycss())                    //压缩文件
       .pipe(gulp.dest('dist/styles'))            //输出文件目录
       .pipe(notify({message:'css task ok'}));   //提示成功
});

//JS处理
gulp.task('minifyjs',function(){
   return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js'])  //选择合并的JS
       .pipe(concat('order_query.js'))   //合并js
       .pipe(gulp.dest(''dist/js'))         //输出
       .pipe(rename({suffix:'.min'}))     //重命名
       .pipe(uglify())                    //压缩
       .pipe(gulp.dest('dist/js'))            //输出 
       .pipe(notify({message:"js task ok"}));    //提示
});

附件二：gulpfile.js示例2

var gulp = require('gulp');
var rename = require('gulp-rename');//重命名
var uglify=require('gulp-uglify');//js压缩
var watch=require('gulp-watch');//监视
var less=require('gulp-less');//编译less
var minifyCss = require("gulp-minify-css");//压缩CSS
var minifyHtml = require("gulp-minify-html");//压缩html
var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 
// gulp.task('min', function () {
//     gulp.src('copyUrl/js/resize.js') // 要压缩的js文件
//     .pipe(uglify()) //使用uglify进行压缩,更多配置请参考：
//     .pipe(rename('resize.min.js'))
//     .pipe(gulp.dest('dist/fot')); //压缩后的路径
// });
 
gulp.task('watchs',function(){
    gulp.watch('cug_vatti_Backpass/*.html',gulp.series('html'));
    gulp.watch('cug_vatti_Backpass/css/*.less',gulp.series('css'));
    gulp.watch('cug_vatti_Backpass/js/*.js',gulp.series('js'));
})
gulp.task('connect',function(){
    connect.server({
        root:'cug_vatti_Backpass',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9909//端口
    })
})
 
gulp.task('html',function(){
    return gulp.src('cug_vatti_Backpass/*.html')
    .pipe(gulp.dest('dist/html'))
    .pipe(connect.reload());
})
 
gulp.task('css',function(){
    return gulp.src('cug_vatti_Backpass/css/*.less')
    .pipe(less())//编译less
    .pipe(gulp.dest('cug_vatti_Backpass/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){
    return gulp.src('cug_vatti_Backpass/js/jquery-1.8.0.min.js')
    .pipe(jshint())//检查代码
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload());
})
 //gulp.series|4.0 依赖
 //gulp.parallel|4.0 多个依赖嵌套
gulp.task('default',gulp.series(gulp.parallel('connect','watchs','html','css','js')));

其他注意事项

1、charset和import格式化
识别内容
@charset 'utf-8';
@import 'const.scss';

2、导入scss命名格式，要以下划线开头

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/taony/p/10177730.html