《前端构建工具gup入门教程sass编译js查错.docxVIP

前端构建工具gulp入门教程 sass编译 js查错，css js压缩合并　　这次是一个完整的gulp环境，sass编译，css js压缩合并 自动刷新等　　安装node、 安装gulp、打开到项目文件夹、略　　安装依赖npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename gulp-minify-css browser-sync --save-dev　　如果有 package.json 可以直接 npm install 安装　　gulp-jshint 检查JS　　gulp-sass sass编译　　gulp-concat 整合文件　　gulp-uglify 压缩javascript　　gulp-rename 重命名　　gulp-minify-css 压缩CSS　　gulp-image 压缩图片var imagemin = require(gulp-imagemin);var imgSrc = source/images/*;var imgDest = dist/pages/images;//压缩图片gulp.task(imgmin,function(){ gulp.src(imgSrc) .pipe(imagemin()) .pipe(gulp.dest(imgDest));});　　gulp-htmlmin 压缩html使用tipsgulp.src(htmlSrc) .pipe(htmlmin({collapseWhitespace: true})) //设置是够压缩html文件 true.pipe(gulp.dest(htmlDest));//htmlmin参数 removeComments: true,//清除HTML注释 collapseWhitespace: true,//压缩HTML collapseBooleanAttributes: true,//省略布尔属性的值 input checked=true/ == input / removeEmptyAttributes: true,//删除所有空格作属性值 input id= / == input / removeScriptTypeAttributes: true,//删除script的type=text/javascript removeStyleLinkTypeAttributes: true,//删除style和link的type=text/css minifyJS: true,//压缩页面JS minifyCSS: true//压缩页面CSS　　browser-sync 浏览器同步 自动刷新 会启动一个小型服务器来打开网站 官网　　初始化服务器文件夹browserSync.init({ server: { baseDir: dist/pages } });//执行刷新方法browserSync.reload();　　待补充　　为了避免我们每次都需要安装这么多插件，可以使用package.json　　在目录中 npm init 直接新建package.json　　也可以自己新建文件　　name 名字可以自取，我们安装完那么伛插件以后，会出现以下这么多的插件列表{ name: app, version: 0.0.1, description: , main: gulpfile.js, dependencies: { browser-sync: ^2.13.0, gulp-concat: ^2.6.0, gulp-jshint: ^2.0.1, gulp-minify-css: ^1.2.4, gulp-rename: ^1.2.2, gulp-uglify: ^2.0.0, gulp-ruby-sass: ^2.0.6, gulp-watch: ^4.3.8, gulp: ^3.9.1, jshint: ^2.9.3, gulp-sass: ^2.3.2 }}　　gulp必知 前端构建工具gulp入门教程　　gulp.run 运行函数　　gulp.task 命名函数　　gulp-watch 监视　　gulp.src 读取文件　　gulp.dest 输出文件　　文件目录：//引入gulpvar gulp = require(gulp);//引入组件var jshint = require(gulp-jshint);var sass = requ