gulp自动化构建工具

gulp自动化构建工具

参考：

         http://www.cnblogs.com/aiiright/p/6762355.html

1､什么是 gulp?

    gulp 是前端代码的构建工具。能对网站资源进行优化，基于 nodeJs 自动任务运行器，能够完成 JS／css／sass／less ／image／html／coffee 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，鉴听文件的更改。

如何安装 gulp ？

    1、全局安装 gulp

        命令行：npm  install  -g  。

        注）如果是 windows  下的话可以直接安装，如果是 mac 版本下，需要在命令前 加 sudo 权限。

    2、项目开发依赖（devDependencies）安装

        命令行：npm install 插件 --save--dev。（生产环境）

          npm install 插件 --save。（开发环境）

          gulp以及webpack都是开发所需要的工具,当前是要加--save--dev，放开发属性下。 vue 就要在生产环境，所以要加  —save 。

        

如何在项目中使用 gulp？

    第一步： npm  init（初始化）

                       

    第二步：插件安装和配置

                1､常用的插件：

                            gulp-sass sass编译

                            gulp-minify-csscss压缩

                            gulp-imagemin压缩 png/jpg/git/svg 格式图片文件

                            browser-sync保持多浏览器、多设备同步、在前端开发是非常有用，可谓是必备组件。

                            gulp-concat整合文件

                2､ 安装基本插件的命令：

                        npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

                3､步骤：

                        a、用使用 gulp 的插件，首先要用 require 把插件加载进来，如果使用的插件非常多，gulpfile.js文件开头如下：

                                var gulp = require('gulp’);

                        b、自动加载插件

                                gulp-load-plugins 这个插件能自动帮你加载 package.json 文件里的gulp插件。

                        c、任务执行

                        分析：

                                    task-name 是给任务起的名字，命令行中执行命令：gulp task-name。

                              输出结果是：shuaishuaige。

                        例：

                                    gulp.task('task-name', function() {

                                        console.log('shuaishuaige!');

                                    });

执行成功的效果如下：

gulp一共五中方法：

            新建任务

                    gulp.task( )

            获取文件源地址

                    gulp.src( )

            文件输出地址

                    gulp.dest( )

            运行任务

                    gulp.run( )

            监听文件修改

                    gulp.watch( )

            要操作的图片

                    gulp.src( )

            要执行的图片

                     gulp.pipe( )

             package.json中定义的插件名字

                    plugins.uglify( )   

           将图片移动到文件夹

                     gulp.dest( )

这是我在项目中用 gulp 进行打包写的代码？

    

        /**

         * 组件安装

         * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-minify-html gulp-load-plugins gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean --save-dev

         * minifyHtml       html压缩

         * imagemin         图片压缩

         * rubySass         sass压缩

         * minifyCss        css压缩

         * uglify           js压缩

         * jshint           js检查

         * rename           文件重命名

         * concat           文件合并

         * clean            清空文件夹

         * browserSync      自动刷新

         * gulp.src()       要操作的图片

         * gulp.pipe()      要执行的图片

         * gulp.dest()      将图片移动到文件夹

        */

        //引入 gulp 的插件

        var gulp = require('gulp');

        var bs = require("browser-sync").create();

        //gulp-load-plugins 插件可以直接加载 package.json 里面的插件

        var plugins = require('gulp-load-plugins')({

            //让gulp-load-plugins插件能匹配除了gulp插件之外的其他插件

            pattern: '*'

        });

        //静态服务器 + 监听 css/html 文件

        gulp.task('serve', ['css', 'js','html', 'images'], function() {

            console.log('帅帅哥运行项目啦〜〜〜');

            // 启动服务器

            plugins.browserSync.init({

                server: "./dev",

            });

            // 5秒后退出服务器

            // setTimeout(function () {

            //     bs.exit();

            // }, 5000);

            //进行文件监控

            gulp.watch("dev/css/*.css", ['css']);

            gulp.watch("dev/js/*.js", ['js']);

            gulp.watch("dev/images/*.png", ['images']);

            gulp.watch("dev/html/*.html", ['html']);

        });

        /* css代码压缩合并

         * 1､把dev/css/下的所有文件合并起来，叫all.css

         * 2､将all.css压缩，之后重命名为all.min.css

         * 3､再将此css放入dist/css/下

        */

        gulp.task('css', function() {

            gulp.src("dev/css/*.css")

                .pipe(plugins.concat('all.css'))        

                .pipe(plugins.minifyCss())              

                .pipe(plugins.rename('all.min.css'))    

                .pipe(gulp.dest('dist/css'))

                // .pipe(plugins.filter("**/*.css"))

                .pipe(bs.stream());

                console.log("帅帅哥〜〜css压缩完毕");

        });

        // js代码压缩、合并  

        gulp.task('js', function () {  

            gulp.src('dev/js/*.js')

              .pipe(plugins.concat("all.js"))

              .pipe(plugins.uglify())

              .pipe(plugins.rename("all.min.js"))

              .pipe(gulp.dest('dist/js'))

              .pipe(bs.stream());

              console.log("帅帅哥〜〜JS压缩完毕");

        });

        //html文件压缩  

        gulp.task('html', function () {  

            var options = {

                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

            };

            gulp.src('dev/html/*.html')   

                .pipe(plugins.htmlmin(options))

                .pipe(gulp.dest('dist/html'))

                .pipe(bs.stream());

                console.log("帅帅哥〜〜html压缩完毕");

        });  

        //图片压缩

        gulp.task('images', function (){

            gulp.src('dev/images/*.+(png|jpg|gif|svg)')

                .pipe(plugins.imagemin())

                .pipe(gulp.dest('dist/images'))

                .pipe(bs.stream());

                console.log("帅帅哥〜〜图片压缩");

        });

        //清除目录或文件

        gulp.task('clean', function (){

            gulp.src('dist')

                .pipe(plugins.clean());

        });

        //执行命令/gulp shuaishuaige(这里 shuaishuaige 随便定义的名字)

        gulp.task('shuaishuaige', ['serve'],function(){

            console.log("服务启动");

        });